<template>
  <div class="shopinfo-box">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div class="ball" v-show="flag" ref="ballref"></div>
    </transition>


    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :list="list"></swiper>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-header">{{infoList.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>
            市场价格: <del>￥{{infoList.market_price}}</del>&nbsp;&nbsp;
            销售价格: <span class="now-price">￥{{infoList.sell_price}}</span>
          </p>
          <p class="shop-num">
            购买数量: &nbsp;<num @givenum="getnum" :quantity="infoList.stock_quantity"></num>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button> &nbsp;
            <mt-button type="danger" size="small" @click="goCar">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>
            商品货号: {{infoList.goods_no}}
          </p>
          <p>
            商品库存: {{infoList.stock_quantity}} 件
          </p>
          <p>
            上架时间: {{infoList.add_time}}
          </p>
        </div>
      </div>
      <div class="mui-card-footer bottom-info">
        <mt-button type="primary" size="large" plain @click="goDescription">商品详情</mt-button><br>
        <mt-button type="danger" size="large" plain @click="goComment">商品评论</mt-button>
      </div>
    </div>

  </div>
</template>
<script>
import swiper from "../common/swiper.vue";
import num from "../common/ShopNum.vue";
export default {
  data() {
    return {
      list: [],
      infoList: [],
      id: this.$route.params.id,
      flag: false,
      count:1
    };
  },
  created() {
    this.getList();
    this.getInfoList();
  },
  methods: {
    getnum(info) {
      this.count=info
    },
    getList() {
      this.$http.get("api/getthumimages/" + this.id).then(res => {
        this.list = res.body.message;
      });
    },
    goCar() {
      this.flag = true;
      let info={
        id:this.id,
        count:this.count,
        selected:true,
        price:this.infoList.sell_price
      }
      this.$store.commit("addCar",info)
    },
    getInfoList() {
      this.$http.get("api/goods/getinfo/" + this.id).then(res => {
        this.infoList = res.body.message[0];
      });
    },
    goDescription() {
      this.$router.push("/home/shopdesc/" + this.id);
    },
    goComment() {
      this.$router.push("/home/shopcom/" + this.id);
    },
    beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      el.offsetHeight;
      let num = document.getElementById("app-box");
      let ball = this.$refs.ballref;

      let x =
        num.getBoundingClientRect().left - ball.getBoundingClientRect().left;
      let y =
        num.getBoundingClientRect().top - ball.getBoundingClientRect().top;

      el.style.transform = `translate(${x}px, ${y}px)`;
      el.style.transition = "all ease .8s";
      done();
    },
    afterEnter(el) {
      this.flag = false;
    }
  },
  components: {
    swiper,
    num
  }
};
</script>
<style lang="scss" scoped>
.shopinfo-box {
  background-color: #eee;
  overflow: hidden;
  .ball {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    z-index: 99;
    left: 145px;
    top: 368px;
  }
  .shop-num {
    display: flex;
    align-items: center;
  }
  .now-price {
    color: red;
  }
  .bottom-info {
    display: block;
  }
}
</style>